import { useState, useRef, useEffect } from "react";
import { Input, Form, Card} from "antd";
import dayjs from "dayjs";
import UploadURL from "@/components/UploadURL"
const MerchantInfo = () => {
    // 表单参数
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
    };

    //定义表单数据
    let [form, setForm] = useState({
        code: dayjs(Date.now()).format("YYYYMMDDHHmmssm"),
        key: "",
        name: "",
        merchant: "",
        phone: "",
        address: "",
        uploadUrl: "",
    });

    let refImg = useRef()
    useEffect(() => {
    })


    return (
        <div>
            <Card className='m-auto  w-[90%] rounded-none p-0 m-t-8'>
                <Form
                    {...formItemLayout}
                    variant="filled"
                    style={{ maxWidth: 600 }}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="商户编码"
                        name="code"
                        rules={[{ message: "Please input!" }]}
                    >
                        <div style={{ position: 'relative' }}>
                            <Input value={form.code} disabled onChange={() => { }} />
                            <div className="note"
                                onClick={() => {
                                }}
                            >
                            </div>
                            <span className="text-gray-400 text-xs">
                                商户唯一标识，由系统生成，无法修改
                            </span>
                        </div>
                    </Form.Item>

                    <Form.Item
                        label="商户名称"
                        name="merchant"
                        rules={[{ required: true, message: "Please input!" }]}
                    >
                        <Input
                            value={form.merchant}
                            onChange={(e) => {
                                setForm({ ...form, merchant: e.target.value });
                            }}
                        />

                    </Form.Item>

                    <Form.Item
                        label="地址"
                        name="address"
                        rules={[{ required: true, message: "Please input!" }]}
                    >
                        <Input
                            value={form.address}
                            onChange={(e) => {
                                setForm({ ...form, address: e.target.value });
                            }}
                        />
                    </Form.Item>

                    <Form.Item
                        label="联系人"
                        name="name"
                        rules={[{ required: true, message: "Please input!" }]}
                    >
                        <Input
                            value={form.name}
                            onChange={(e) => {
                                setForm({ ...form, name: e.target.value });
                            }}
                        />
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: "Please input!" }]}
                    >
                        <Input
                            value={form.phone}
                            onChange={(e) => {
                            setForm({ ...form, phone: e.target.value })

                            }}
                        />
                    </Form.Item>

                    <Form.Item
                        label="商家资质上传"
                        name="uploadUrl"
                        rules={[{ required: true, message: "Please input!" }]}
                    // getValueFromEvent={normFile}
                    >
                        <UploadURL ref={refImg} imgSrc={""} setForm={undefined} form={undefined} />
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default MerchantInfo;
